<template>
	<div class="gwc">
		<div class="body">
			<div class="head">
				<div>
					<h3>
						<i class="el-icon-notebook-2"></i>
						&nbsp;我的购物车清单
					</h3>
				</div>
			</div>

			<div>
				<div>
					<el-table :data="list" style="width: 100%" height="250">
						<el-table-column fixed prop="book.pic" label="图片" width="150">
						</el-table-column>
						<el-table-column prop="book.name" label="商品名称" width="120">
						</el-table-column>
						<el-table-column prop="price" label="商品价钱" width="120">
						</el-table-column>
						<el-table-column prop="num" label="商品数量" width="120">
						</el-table-column>
						<el-table-column prop="SumPrice" label="商品总价" width="300">
						</el-table-column>
						<el-table-column prop="zip" label="复选框" width="120">
						</el-table-column>
						<el-table-column prop="zip" label="编号" width="120">
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'PcGwc',
		data() {
			return {
				checklist: [],
				checkall: false,
				list: [],
				shipInfo: [],
			}
		},
		computed: {
			SumPrice() {
				this.checklist = Array.from(new Set(this.checklist));
				let sum = 0;
				this.list.forEach((item, i) => {

					if (this.checklist.indexOf(item.id) != -1) {
						sum += item.price * item.num;
					}
				})
				return sum.toFixed(2);
			}
		},
		methods: {
			toggle(i, x) {
				this.list[x].num = this.list[x].num + i;
				if (this.list[x].num < 1) {
					this.list[x].num = 1;
				}
			},
			CheckOne() {
				this.checkall = this.checklist.length == this.list.length ? true : false;
			},
			CheckAll() {
				if (this.checkall) {
					this.list.forEach((item, i) => {
						this.checklist.push(item.id);
					})
				} else {
					this.checklist = [];
				}
			},
			addOrder() {
				let order = [];
				for (let i = this.checklist.length - 1; i >= 0; i--) {
					this.list.forEach((item, x) => {
						if (item.id == this.checklist[i]) {
							order.push(item)
							this.list.splice(x, 1)
						}
					})
					this.checklist.splice(i, 1)
				}

				let data = {
					ship2name: this.shipInfo.name,
					ship2phone: this.shipInfo.phone,
					ship2addr: this.shipInfo.addr,
					carts: order
				}

				let token = localStorage.getItem('token');
				token = "Bearer " + token;
				let h = {
					headers: {
						'Authorization': token,
					}
				}
				this.$postk('/api/fore/cart/add2Order', data, h).then((resp) => {
					console.log(resp.data);
					alert('转为订单成功')
				})
			}
		},
		created() {
			let token = localStorage.getItem('token');
			token = "Bearer " + token;
			let h = {
				headers: {
					'Authorization': token,
				}
			}
			console.log(h);
			this.$get('/api/fore/cart/findMyCarts', h).then((resp) => {
				this.list = resp.data.data;
				console.log(this.list);
				this.$get('/api/user/shipInfo', h).then((rsp) => {
					this.shipInfo = rsp.data.data;
				})
			})
		}
	}
</script>

<style scoped>
	.gwc {
		margin-top: 40px;
		margin-right: 8%;
		margin-left: 8%;
		min-height: 88vh;
	}

	.body {
		margin: 0;
		padding: 0;
	}

	.body .head {
		display: flex;
		justify-content: center;
		height: 36px;
		line-height: 36px;
		margin-bottom: 5px;
		background-color: #fff;
		border-top: 10px solid #fff;
		border-bottom: 1px solid #b3d8ff;
		margin-right: -2.5%;
		margin-left: -2.3%;
	}

	.body .head h3 {
		color: #3f7fce;
		font-weight: 800;
	}
</style>